<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#d1 {
				position: relative;
				top: 50px;
				left: 200px;
				padding-left: 110px;
				padding-top: 5px;
			}

			#im {
				border: none;
				height: 30px;
				width: 100px;
				position: absolute;
				top: 0px;
				left: 0px;

			}

			#b1 {
				outline: none;
				border: none;
				height: 25px;
				width: 100px;
				background-color: blueviolet;
				color: #f7f8f9;
			}

			#in1 {
				outline: none;
				height: 20px;
				width: 400px;
			}

			#d1 a {
				text-decoration: none;
				color: black;
			}

			
		</style>
		<script>
			var im = document.querySelector("#im");

			function baidu() {
				document.querySelector("#im").src = 'baidu_web.png';
				document.querySelector("#fo1").action='https://www.baidu.com/s';
				document.querySelector("#in1").name='wd';
			}

			function guge() {
				document.querySelector("#im").src = 'google_web.png';
				document.querySelector("#fo1").action='https://www.baidu.com/s';
			}

			function tb() {
				document.querySelector("#im").src = 'taobao.png';
				document.querySelector("#fo1").action='https://www.baidu.com/s';
			}
		</script>
	</head>
	<body>
		<div id="d1">
			<img src="baidu_web.png" alt="" id="im">
			<form target="_blank" action="https://www.baidu.com/s" method="get" id="fo1" >
			<input type="text" id="in1" name="wd" ><button type="submit" onclick="" id="b1">搜索</button><br>		
			<a href="" onclick="baidu()" ><input name="Fruit" type="radio" value="" />百度 </a>
			<a href="" onclick="guge()" ><input name="Fruit" type="radio" value="" />谷歌</a> 
			<a href="" onclick="tb()" ><input name="Fruit" type="radio" value="" />淘宝 </a>
			
			
			</form>
		</div>
	</body>
</html>
